<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-bill-container`]">
      <view class="bill-list">
        <template v-if="list.length">
          <view class="bill-item-card" v-for="(item, index) in list" :key="index" :class="{ need_pay: item.need_pay == 1 }">
            <view class="bill-item-card-title">{{ item.room_name }}</view>
            <view class="bill-item-card-content"> ￥{{ item.total_amount }} 元 </view>
            <view class="monthly-billing" v-for="(items, indexs) in item.month_bill_array" :key="indexs" @click="handlePayment(item, items)">
              <view class="item-left"> {{ items.name }}</view>
              <!-- 应退款 已退款 未处理 -->
              <view class="item-right">
                <span class="unit">￥ </span><span class="price">{{ items.total_amount }}元</span> <span class="unit">{{ paymentStatus(items) }}</span>
                <uv-icon name="arrow-right" size="16"></uv-icon>
              </view>
            </view>
          </view>
        </template>
        <template v-else>
          <cu-empty mode="list" text="暂无账单"> </cu-empty>
        </template>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { billList } from './api'

export default {
  name: 'bill',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      p: 1,
      list: [],
      enumStatus: {
        0: '',
        1: '',
        2: '',
        3: '',
        4: '',
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {
    this.p = 1
    this.getData()
  },
  // 加载更多
  onReachBottom() {
    this.p++
    this.getData()
  },

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    paymentStatus({ need_pay, total_amount }) {
      let title = ''
      if (!need_pay) {
        if (total_amount <= 0) {
          title = '应退'
        } else if (total_amount > 0) {
          title = '已缴纳'
        } else {
          title = '已退'
        }
      } else {
        if (total_amount <= 0) {
          title = '应退'
        } else if (total_amount > 0) {
          title = '未缴纳'
        }
      }
      return title
    },
    async getData() {
      const { data } = await billList({ p: this.p })
      uni.stopPullDownRefresh()
      if (this.p === 1) {
        this.list = data
      } else {
        this.list = [...this.list, ...data]
      }
    },
    handlePayment({ belong_type, id, project_id }, { name }) {
      this.$ROUTE.go('/pages/subpackage/bill/pay-bills', { belong_type, contract_id: id, year_month: name, project_id })
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('bill-container')} {
  position: relative;
  background: #f5f5f5;
  overflow: hidden;
  .bill-list {
    padding: 0 10px;
    margin-top: 10px;
    overflow: hidden;
    .bill-item-card {
      background: white;
      border-radius: 8px;
      padding: 10px;
      position: relative;
      overflow: hidden;
      margin-bottom: 10px;
      &::after {
        content: '已缴纳';
        color: white;
        position: absolute;
        right: -24px;
        top: 8px;
        background: #42b983;
        transform: rotate(45deg);
        padding: 5px 25px;
      }
      .bill-item-card-title {
        margin: 5px 0;
      }
      .bill-item-card-content {
        text-align: right;
        padding: 8px 8px 0;
      }
      .monthly-billing {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 0 16px 16px;
        font-size: 12px;
        border-top: 1px solid #f5f5f5;
        .item-right {
          display: flex;
          align-items: baseline;
          vertical-align: bottom;
          .uv-icon {
            margin-left: 5px;
          }
        }
        .item-right .unit {
          font-size: 10px;
          color: #999999;
        }
        .item-right .price {
          color: $uv-price-primary;
          font-size: 20px;
          margin-right: 2px;
        }
      }
    }
    .need_pay {
      &::after {
        content: '未缴纳';
        color: white;
        position: absolute;
        right: -24px;
        top: 8px;
        background: $uv-primary;
        transform: rotate(45deg);
        padding: 5px 25px;
      }
    }
  }
}
</style>
